<template>
  <div id="table1">
    <el-divider content-position="left">条件筛选</el-divider>
    <el-form :inline=true label-position="right" label-width="80px" :model="formInline">
      <el-form-item label="名称" label-width="80px">
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" label-width="80px">
        <el-input v-model="formInline.region"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">数据列表</el-divider>

    <el-table :data="pageInfo.list" >
      <el-table-column v-if="columnList.indexOf('订单编号')>=0" prop="order" label="订单编号" width="180"></el-table-column>
      <el-table-column v-if="columnList.indexOf('支付人')>=0" prop="name" label="支付人" width="100px"></el-table-column>
      <el-table-column v-if="columnList.indexOf('支付时间')>=0" prop="payTime" label="支付时间" width="180"></el-table-column>
      <el-table-column v-if="columnList.indexOf('支付方式')>=0" prop="payType" label="支付方式" width="80px">
        <template slot-scope="scope">
          {{scope.row.payType|payType}}
        </template>
      </el-table-column>
      <el-table-column v-if="columnList.indexOf('支付金额')>=0" prop="paySum" label="支付金额" width="100px"></el-table-column>
      <el-table-column v-if="columnList.indexOf('邮寄地址')>=0" prop="address" label="邮寄地址"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-button type="success" icon="el-icon-plus" size="small"></el-button>
          <el-popover trigger="click" placement="bottom-end">
            <el-checkbox-group v-model="columnList">
              <el-checkbox class="block-el-checkbox" label="订单编号"></el-checkbox>
              <el-checkbox class="block-el-checkbox" label="支付人"></el-checkbox>
              <el-checkbox class="block-el-checkbox" label="支付时间"></el-checkbox>
              <el-checkbox class="block-el-checkbox" label="支付方式"></el-checkbox>
              <el-checkbox class="block-el-checkbox" label="支付金额"></el-checkbox>
              <el-checkbox class="block-el-checkbox" label="邮寄地址"></el-checkbox>
            </el-checkbox-group>
            <el-button type="primary" icon="el-icon-more" size="small" slot="reference"></el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-button-group>
          <el-button type="primary" icon="el-icon-edit"  size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete"  size="mini" plain></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name: 'Table',
  data () {
    return {
      columnList: ['订单编号', '支付人', '支付时间', '支付方式', '支付金额', '邮寄地址'],
      formInline: {
        user: '',
        region: ''
      },
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        list: []
      },
      tableData: []
    }
  },
  methods: {
    handleSizeChange (e) {
      this.pageInfo.pageSize = e
      this.getPageInfo()
    },
    handleCurrentChange (e) {
      this.pageInfo.pageNum = e
      this.getPageInfo()
    },
    getPageInfo () {
      this.$http.get('http://www.mock.com/listData1', {pageNum: this.pageInfo.pageNum, pageSize: this.pageInfo.pageSize}).then(res => {
        console.log(res)
        this.pageInfo = res.data
      }).catch(errors => {
        console.log(errors)
      })
    }
  },
  created () {
    this.getPageInfo()
  },
  filters: {
    payType: function (value) {
      if (value === 1) {
        return '支付宝'
      }
      if (value === 2) {
        return '微信'
      }
    }
  }
}
</script>

<style scoped>
  .block-el-checkbox {
    display: block;
    margin-right: 0;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin: 2px 5px 2px 5px;
  }
</style>
